<header class="site-header">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a href="index.html" class="navbar-brand d-flex align-items-center">
        <svg class="mr-2" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24" focusable="false" xmlns="http://www.w3.org/2000/svg">
          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
          <circle cx="12" cy="13" r="4" />
        </svg>
        <span>{{ pkg.name | replace('[-_]', ' ', 'g') | title }}</span>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site_menu" aria-controls="site_menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="site_menu">
        <ul class="navbar-nav ml-auto">
          {% for item in menus %}
          {% set isCurrent = current === item.name | lower %}
          <li class="nav-item{% if item.children %} dropdown{% endif %}{% if isCurrent %} active{% endif %}">
            <a class="nav-link{% if item.children %} dropdown-toggle{% endif %} d-flex align-items-center" href="{{ item.link }}"{% if item.children %} id="nav-{{ item.name | lower }}-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{% endif %}>{% if item.icon %}<i class="icon-{{ item.icon }} mr-1"></i> {% endif %}{{ item.name }}{% if isCurrent %} <span class="sr-only">(current)</span>{% endif %}</a>
            {% if item.children %}
            <div class="dropdown-menu" aria-labelledby="nav-{{ item.name | lower }}-dropdown">
              {% for item in item.children %}
              {% if item.name === 'divider' %}
              <div class="dropdown-divider"></div>
              {% else %}
              <a class="dropdown-item d-flex align-items-center" href="{{ item.link }}" target="_brank">{{ item.name }}</a>
              {% endif %}
              {% endfor %}
            </div>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </nav>
</header>
